<!-- 
  文件: uitl.vue
  作用: 展示 Element Plus 菜单组件的使用示例，包括折叠功能和多级菜单
-->
<template>
  <div class="menu-demo-container">
    <!-- 控制菜单折叠状态的单选按钮组 -->
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :value="false">展开</el-radio-button>
      <el-radio-button :value="true">收起</el-radio-button>
    </el-radio-group>
    
    <!-- 垂直菜单组件 -->
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
    >
      <!-- 一级子菜单 -->
      <el-sub-menu index="1">
        <!-- 子菜单标题 -->
        <template #title>
          <el-icon><setting /></el-icon>
          <span>数据管理</span>
        </template>
        
        <!-- 菜单项分组一 -->
        <el-menu-item-group>
          <template #title></template>
          <el-menu-item index="1-1">选项一</el-menu-item>
          <el-menu-item index="1-2">选项二</el-menu-item>
        </el-menu-item-group>
        </el-sub-menu>

      <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <template #title>远程控制</template>
      </el-menu-item>

    </el-menu>
  </div>
</template>
  
<script lang="ts" setup>
// 导入 Vue 的响应式 API
import { ref } from 'vue'

// 导入 Element Plus 的图标组件
import {
  Document,      // 文档图标
  Menu as IconMenu,  // 菜单图标（重命名为 IconMenu 避免与 el-menu 组件冲突）
  Location,      // 位置图标
  Setting,       // 设置图标
} from '@element-plus/icons-vue'

// 创建一个响应式变量控制菜单是否折叠，默认为折叠状态
const isCollapse = ref(false)

// 菜单打开时的回调函数
const handleOpen = (key: string, keyPath: string[]) => {
  console.log('菜单打开:', key, keyPath)
}

// 菜单关闭时的回调函数
const handleClose = (key: string, keyPath: string[]) => {
  console.log('菜单关闭:', key, keyPath)
}
</script>
  
<style>
/* 
  当菜单不处于折叠状态时的样式
  :not(.el-menu--collapse) 选择器确保这些样式只应用于展开状态的菜单
*/
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;        /* 展开时的宽度 */
  min-height: 400px;   /* 最小高度 */
}

/* 添加容器样式使组件更美观 */
.menu-demo-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
</style>
  